<template>
	<view class="containner">
		<view class="withdrawCard">
			<view class="title">提现金额</view>
			<view class="withdrawMoney">
				￥<input class="withdrawInput" v-model="withdraw" type="number" @input="isZero" />
			</view>
			<view class="tips">
				<text>可提现金额 ¥{{parseFloat(withdrawMoney.total) - parseFloat(withdrawMoney.income)}}</text>
				<text @click="alldraw" style="color: #01A90C;font-weight: 400;margin-left: 10upx;">全部提现</text>
			</view>
		</view>

		<view class="formCard">
			<view class="">请添加提现银行卡账户</view>
			<u-form :model="formCard" ref="uForm" label-width="auto">
				<u-form-item label="持卡人" prop="name">
					<u-input input-align="right" placeholder="请输入持卡人姓名" v-model="formCard.name" />
				</u-form-item>
				<u-form-item label="卡号" prop="intro">
					<u-input input-align="right" placeholder="请输入银行卡号" v-model="formCard.cardNo" />
				</u-form-item>
				<u-form-item label="开户行" prop="intro">
					<u-input input-align="right" placeholder="请输入开户银行名称" v-model="formCard.bankName" />
				</u-form-item>
			</u-form>
		</view>
		
		<!-- btn -->
		<view class="btns">
			<view class="btn" :class="isFlag?'active':''" @click="getwithdraw()">申请提现</view>
		</view>
		
		<!-- tips -->
		<view class="tipsContainner">
			<view class="tipsTitle">温馨提示</view>
			<view class="content">
				<view class="contentItem">1、提现额度需≥10元，提现手续费{{ratio}}%；</view>
				<view class="contentItem">2、提现时间：09:00~18:00  周一至周六；</view>
				<view class="contentItem">3、提现提示后台自行</view>
			</view>
		</view>
		
		<u-popup v-model="isShow" border-radius="20" mode="center">
			<view class="popupConfirm">
				<view>
					<u-icon size="100" color="#01a90c" name="checkmark-circle-fill"></u-icon>
				</view>
				<view>提现申请成功</view>
				<view>系统将在3-7个工作日内审核完成</view>
				<view>并打款提现金额到指定账户</view>
				<view class="btnClose" @click="btnClose">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import toast from '../../uni_modules/vk-uview-ui/libs/function/toast';
import { getteamtotal,getcashapply,getcashratio } from '@/api/user.js'
	export default {
		data() {
			return {
				withdrawMoney: {},
				withdraw:0,
				isFlag:false,
				isShow:false,
				ratio:0,
				formCard:{
					name:'',
					cardNo:'',
					bankName:''
				}
			};
		},
		watch:{
			withdraw:{
				handler(val,old){
					old = val
				},
				deep:true
			}
		},
		mounted() {
			this.getteamtotals()
		},
		methods:{
			isZero(){
				if (this.withdraw > 0 && (this.withdraw <= (parseFloat(this.withdrawMoney.total) - parseFloat(this.withdrawMoney.income)))) {
					this.isFlag = true;
				}else{
					this.isFlag = false
				}
			},
			alldraw(){
				this.isFlag = true;
				this.withdraw = (parseFloat(this.withdrawMoney.total) - parseFloat(this.withdrawMoney.income));
			},
			getwithdraw(){
				let that = this
				if (this.isFlag) {
					// this
					let obj = {
						cash_pay:3,
						cash_pay_account:this.formCard.cardNo,
						cash_pay_bank:this.formCard.bankName,
						cash_amount:this.withdraw,
						cash_charge:that.ratio,
						cash_real_amount:this.withdraw * that.ratio * 0.01,
						cash_message:''
					}
					getcashapply(obj).then(res=>{
						if(res.data.flag){
							that.isShow = true;
						}else{
							toast(res.data.msg)
						}
					})
				} else{
					toast('金额不能为0')
				}
			},
			btnClose() {
				this.isShow = false
			},
			getteamtotals(){
				let that = this
				getteamtotal().then(res=>{
					that.withdrawMoney = res.data
				})
				getcashratio().then(res=>{
					that.ratio = res.data.ratio
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containner {
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-top: 30upx;
	}

	.withdrawCard {
		margin: 30upx;
		padding: 30upx;
		background: #FFFFFF;
		border-radius: 10upx;

		.title {
			margin: 30upx 0;
		}

		.withdrawMoney {
			display: flex;
			height: 80upx;
			line-height: 80upx;
			border-bottom: #DDDDDD solid 1upx;

			.withdrawInput {
				font-size: 60upx;
				height: 80upx;
				line-height: 80upx;
			}
		}

		.tips {
			margin-top: 20upx;
		}
	}
	
	.formCard{
		margin: 30upx;
		background-color: #fff;
		padding: 30upx;
	}
	
	.btns{
		margin: 60upx 30upx 30upx;
		.btn{
			background-color: #CBCBCB;
			border-radius:40upx ;
			text-align: center;
			color: #fff;
			font-size: 32upx;
			padding: 24upx 0;
		}
		.active{
			background-color: #01a90c;
		}
	}
	
	// tips
	.tipsContainner{
		margin: 0 30upx;
		.tipsTitle{
			font-size: 30upx;
		}
		.content{
			font-size: 20upx;
		}
	}
	
	.popupConfirm{
		background: #FFFFFF;
		border-radius: 20upx;
		// padding: 30upx;
		overflow: hidden;
		>view{
			text-align: center;
			line-height: 40upx;
			margin: 30upx;
		}
		.btnClose{
			line-height: 60upx;
			margin: 0upx;
			border-top: #AAAAAA 1px solid;
		}
	}

</style>